<template>
<div id="AddSup" class="page-blank">
  <van-nav-bar :title="`${ this.modify ? '修改' : '新增' }特殊用户`" left-arrow @click-left="goBack()"/>
  <div class="flex-body">    
    <van-cell-group>  
      <van-field v-model.number="form.specialPlaTime" required label="日免费时长" placeholder="小时"/>
      <van-field v-if="$store.state.userInfo.roleType == 0" readonly clickable label="免费类别" :value="form.freeCategory" required placeholder="请选择免费类别" @click="showPickerClick('freeCategory')"/>
      <van-field readonly clickable label="选择门店" :value="form.shopName" required placeholder="请选择门店" @click="showChoosePickerClick('shop')" v-if="form.freeCategory === '指定门店使用免费'"/>
      <van-field readonly clickable label="查找会员" :value="form.nick" required placeholder="查找会员" @click="showChoosePickerClick('user')"/>
    </van-cell-group>
    <div class="notice">
      *提示:请注意！您添加的特殊用户为微信/支付宝二者中的某一类，添加完毕后，用户只有使用相对应的小程序租借时才会免费。如果想让用户微信/支付宝都免费，请查询用户微信/支付宝对应id全部新增。
    </div>
    <van-button round type="info" size="small" :loading="submitLoading" @click="submit">提交</van-button>
  </div>

  <van-popup v-model="showChoosePicker" position="bottom" :style="{ height: '100%' }">
    <choose-shop v-if="type === 'shop'" :cb="shopChange" :multiple="true" :initvalue="initvalue" :close="()=>showChoosePicker = false"></choose-shop>
    <choose-huiyuan v-if="type === 'user'" :cb="userChange" :close="()=>showChoosePicker = false"></choose-huiyuan>
  </van-popup>
  <van-popup v-model="showPicker" position="bottom">
    <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"/>
  </van-popup>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import axios from '@/utils/request';
import ChooseShop from './ChooseShop.vue';
import ChooseHuiyuan from './ChooseHuiyuan.vue';

@Component({ components: { ChooseShop, ChooseHuiyuan } })
export default class AddSup extends Vue {
  modify: any = false

  form: any = {
    shopName: '',
    nick: '',
    userId: '',
    specialPlaTime: '',
    freeCategory: '指定门店使用免费',
    specialLineNum: '',
    shopIdList: [],
  }
  user: any = this.$store.state.userInfo
  submitLoading: any = false
  type: any = 'shop'
  showPicker: any = false
  columns: any = []
  picker:any = {
    name: '',
    freeCategoryColumns: [
      { value: 0, text: '指定门店使用免费' },
      { value: 1, text: '所有门店使用免费' }
    ]
  }
  showChoosePicker: any = false

  initvalue: any = []

  modifyRefresh(v: any) {
    this.form = JSON.parse( JSON.stringify( v ) );
    this.modify = true;
    this.form.freeCategory = this.picker.freeCategoryColumns.find((v: any) => v.value === this.form.freeCategory).text;
    if(v.specialUserByShopModelList) {
      this.form.shopIdList = v.specialUserByShopModelList.map((val: any) => val.shopId);
      this.form.shopName = v.specialUserByShopModelList.map((val: any) => val.shopName).toString();
    } else {
      this.form.shopIdList = [];
      this.form.shopName = '';
    }
  }
  showChoosePickerClick(type: any) {
    if ( type == 'shop' ) {
      this.initvalue = this.form.shopIdList.slice(0);
    }
    this.type = type;
    this.showChoosePicker = true;
  }
  showPickerClick(name: any) {
    this.picker.name = name;
    this.columns = this.picker[ name + 'Columns' ];
    this.showPicker = true;
  }
  onConfirm(value: any) {
    this.form[ this.picker.name ] = value.text;
    this.showPicker = false;
  }
  shopChange(arr: any) {
    this.form.shopIdList = arr.map((v: any) => v.shopId);
    this.form.shopName = arr.map((v: any) => v.shopName).toString();
    this.showChoosePicker = false;
  }
  userChange(v: any) {
    this.form.userId = v.userId;
    this.form.nick = v.nick;
    this.showChoosePicker = false;
  }
  queryShopId(obj: any, fun: any) {
    if(this.user.roleType !== 0 && obj.freeCategory === 1) {
      obj.freeCategory = 0;
      axios.get('/api/ShopManageController/getShopIdListByUserId', { userId: this.user.userId }).then((res: any) => {        
        obj.shopIdList = res || [];
        fun();
      }).catch((err: any) => {
        this.submitLoading = false;
      });
    }else{
      fun();
    }
  }
  submit() {
    if( this.submitLoading ) return ;
    if(this.form.specialPlaTime === '') return this.$toast('请输入充电宝每天免费时长');
    if( this.$store.state.userInfo.roleType == 0 ) {
      if(!/^([0-1]?\d|2[0-4])$/.test( this.form.specialPlaTime )) return this.$toast('充电宝每天免费时长只能为0-24之间的整数');
    } else {
      if(!/^([0-1]?\d|2[0-4])$/.test( this.form.specialPlaTime )) return this.$toast('充电宝每天免费时长只能为0-12之间的整数');
      if( this.form.specialPlaTime > 12 && this.$store.state.userInfo.roleType != 0 ) return this.$toast('免费用户最高可设置12个小时');
    }    
  
    if(this.form.shopName === '' && this.form.freeCategory === '指定门店使用免费') return this.$toast('请选择门店');
    if(this.form.userId === '') return this.$toast('请选择会员');
    let obj = JSON.parse(JSON.stringify(this.form));
    obj.freeCategory = this.picker.freeCategoryColumns.find((v: any) => v.text === obj.freeCategory).value;
    this.submitLoading = true;
    let fun = () => {
      axios.post('/api/SpecialUserController/addSpecialUser', obj).then((res: any) => {        
        this.$toast(`${ this.modify ? '修改' : '新增' }成功！`)
        this.submitLoading = false;
        this.$router.go(-1);
      }).catch(() => {
        this.submitLoading = false;
      })
    }
    this.queryShopId(obj, fun);
  }


  goBack() {
    this.$router.go(-1);
  }

  mounted() {
    if(this.$route.query && this.$route.query.type) {
      if(this.$route.params && this.$route.params.userId) this.modifyRefresh( this.$route.params );
      else this.goBack();
    }
  }
  
};
</script>

<style lang="scss">
#AddSup {      
  .notice {
    background: #ffffff;
    padding: 10px;
    color: #f44;
    line-height: 24px;
    font-size: 14px;
  }
  .people-box {
    line-height: 26px;
    background: #fff;
    box-shadow: 1px 1px 2px 1px #dedede;
    border-radius: 3px;
    padding: 0 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    .people-title {
      line-height: 50px;
      border-bottom: 1px solid #dedede;
      .left {
        display: inline-block;
        line-height: 20px;
        vertical-align: middle;
        padding-left: 10px;
      }
      img {
        height: 30px;
        width: 30px;
        vertical-align: middle;
      }
      .right {
        float: right;
        line-height: 50px;
        color: #0086d1;
        .btn {
          line-height: 20px;
          border-radius: 2px;
          margin-left: 10px;
          display: inline-block;
        }
      }
    }
    .people-main {
      padding: 5px 0;
      .label {
        line-height: 30px;
        padding: 0 15px;
        width: 40%;
        margin: 5px 4.5%;
        border: 1px solid #dedede;
        display: inline-block;
        border-radius: 3px;
      }
      .right {
        float: right;
      }
    }
    .data-main {
      padding: 5px 0;
      .label {
        color: #0086d1;
      }
    }
  }
}
</style>

